<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义布局 - Sortable.js</title>
    <!-- 引入 Sortable.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.15.2/Sortable.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #layout-container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .sortable-ghost {
            opacity: 0.5;
            background-color: #f1f1f1;
        }

        .ctrl{
            padding: 2px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            cursor: move; /* 拖拽光标 */
        }

        .ctrlInline{
            display: inline;
        }
        .ctrlParent{
            
            
        }
        .ctrlRow {
            padding: 2px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            cursor: move; /* 拖拽光标 */
        }
    </style>
</head>
<body>
    <div id="layout-container">
        <h2>自定义布局</h2>
        <div class="sortable-list">
            <div class="row1 ctrl" draggable="true">
                <div class="contrl1 ctrl ctrlInline" draggable="true"><input value="1"/></div>
                <div class="contrl2 ctrl ctrlInline" draggable="true"><input value="2" /></div>
            </div>
            <div class="row2 ctrl" draggable="true">
                <div class="contrl3 ctrl ctrlInline" draggable="true"><input value="3"/></div>
                <div class="contrl4 ctrl ctrlInline" draggable="true"><input value="4" /></div>
            </div>            
        </div>
        <button id="add-block">添加元素</button>
       
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const sortableList = document.querySelector('.ctrl');

            console.log("sortableList",sortableList);
            // 初始化 Sortable
            new Sortable(sortableList, {
                animation: 150, // 拖拽动画时长
                ghostClass: 'sortable-ghost', // 拖拽时的占位符样式
                group:{

                    name:"shared",
                    pull:true,
                    put:true
                },
                onUpdate: function (event) {
                    console.log('布局顺序已更新');
                }
            });

            

            // 删除布局块
            document.addEventListener('click', function (event) {
                if (event.target.classList.contains('remove-block')) {
                    event.target.parentElement.remove();
                }
            });

        });
    </script>
</body>
</html>